<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Debug CJX-Vue3</title>
    <script src="../packages/vue/dist/vue.global.js"></script>
    <!-- <script src="../packages/compiler-core/dist/compiler-core.esm-bundler.js"></script> -->
</head>
<body>
    <div id="app">
    </div>

    <button id="btn">Click me</button>

    <script>
      const { reactive, ref, createApp, compile } = CJX_VUE;

      compile(`<div>
          123! {{ test }}
        </div>`)


      // const obj = reactive({ name:'cjx11' })
      // obj.age = 18
      // console.log('reactive', obj)
      // console.log('ref', ref)

      


      // const component = {
      //   props: {
      //     testProps: {
      //       type: String,
      //       default: 'testProps'
      //     }
      //   },
      //   setup(props, { attrs }) {
      //     // console.log('setup', props, attrs);
      //     const state = reactive({ name: 'cjx', age: 18 });

      //     const btnClick = () => {
      //       state.age += 1;
      //       console.log('btnClick', state);
      //     }
      //     document.getElementById('btn').addEventListener('click', () => {
      //       console.log('addEventListener');
      //       state.age += 1;
      //     })
      //     // setTimeout(() => {
      //     //   console.log('setTimeout');
      //     //   state.name = 'cjx2';
      //     // }, 6000)
      //     return {
      //       state,
      //       btnClick
      //     }
      //   },
      //   template: `<div style="background-color: pink; color: #fff;" class="test">
      //     11
      //     <p>Hello, {{ state.name }}!</p>
      //     <div>年龄: {{ state.age }}</div>
      //     <!-- This is a comment -->
      //     <button v-on:click="btnClick">Click me</button>
      //   </div>
      //   <div>11</div>
      //   `,
      //   // render() {
      //   //   console.log('render', this);
      //   //   return h('div', {
      //   //     style: {
      //   //       width: '100px',
      //   //       height: '100px',
      //   //       backagroundColor: 'pink',
      //   //       color: '#fff',
      //   //     },
      //   //     class: { 'test': true },
      //   //   }, [
      //   //     h('p', null, ['Hello, ', this.state.name, '!']),
      //   //     h('div', null, [
      //   //       '1111111111111111111111',
      //   //       h('div', null, [
      //   //         '年龄',
      //   //         this.state.age
      //   //       ])
      //   //     ]),
      //   //   ]);
      //   // }
      // };

      // const app = createApp(component);
      // app.mount('#app');
    </script>
</body>
</html>